<template>
    <div style="width: 100vw">
   
        <div class="shangbian">
            <img class="toubu" src="https://img0.baidu.com/it/u=730416471,802121821&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
            <div class="xubu">
                <div class="cont">
                    学生、教师论坛：畅所欲言
                </div>
            </div>
        </div>
        <!-- tab标签区 -->
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="留言" name="first">
        <div class="diyikuai"></div>
        <div class="dierkuai"></div>
    </el-tab-pane>
    <el-tab-pane label="图片" name="second">图片</el-tab-pane>
    <el-tab-pane label="吧主推荐" name="third">吧主推荐</el-tab-pane>
  
  </el-tabs>
    </div>

</template>


<script>
export default {
    name: 'LianxiLiuyan',

    data() {
        return {
            activeName: 'first'
        };
    },

    mounted() {
        
    },

    methods: {
        handleClick(tab, event) {
        console.log(tab, event);
      }
    },
};
</script>

<style  scoped>
.shangbian{
    position: relative;
}
.toubu{
    width: 100%;
    height: 300px;
}
.xubu{
    /* background-color: blueviolet; */
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: rgba(55,9,55, 0.5);
    color: rgb(237, 237, 237);
    height: 60px;
    display: flex;
    align-items: center;
}
.cont{
    width: 260px;
    margin: 0 auto;
    box-sizing: border-box;
}
.cont:hover{
    border-bottom: 2px solid rgb(238, 232, 232);
}
.diyikuai{
    width:1500px;
    height: 200px;
    background-color: blueviolet;
}
.dierkuai{
    width: 1500px;
    height: 300px;
    background-color: #e31d1d;
}
</style>



